<template>
	<div>
		<div style="font-size:18px;">积分规则管理</div>
		<hr>
		<br>

		<div style="float: right">
			<el-button @click="addShowDialog()">添加规则</el-button>
		</div>
		<el-table :data="list" border @selection-change="$handleSelectionChange">
			<el-table-column prop="name" label="规则名称" min-width="100px"></el-table-column>
			<el-table-column prop="typeName" label="类型" min-width="140px"></el-table-column>
			<el-table-column prop="exchangeCondition" label="兑换条件(数值)" min-width="140px"></el-table-column>
			<el-table-column prop="score" label="兑换积分" min-width="140px"></el-table-column>
			<el-table-column prop="remarks" label="备注" min-width="140px"></el-table-column>
			</el-table-column>
			<el-table-column label="操作" min-width="150px">
				<template scope="scope">
					<el-button :type="scope.row.enabled==1?'success':'danger'" size="small" @click="enabled(scope.row,scope.$index)">{{scope.row.enabled==1?'启用':'禁用'}}</el-button>
					<el-button size="small" @click="editShowDialog(scope.row,scope.$index)">修改</el-button>
					<el-button type="danger" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--分页组件 -->
		<div class="pagination">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="$page.selectPage" :page-size="$page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="$page.total">
			</el-pagination>
		</div>

		<!-- 保存编辑 -->
		<el-dialog :title="SEDialog.title" :visible.sync="SEDialog.isShow">
			<div style="text-align:center;">
				<div style="text-align:left;width:600px;margin:0 auto;">
					<el-form :model="rowData" ref="rowData" :rules="rowDataRule" label-width="100px" class="demo-ruleForm" style="width:60%;">
						<el-form-item prop="name" label="规则名称">
							<el-input v-model="rowData.name" placeholder=""></el-input>
						</el-form-item>
						<el-form-item prop="exchangeCondition" label="兑换条件">
							<el-input-number :min="1" v-model="rowData.exchangeCondition" placeholder=""></el-input-number>
						</el-form-item>
						<el-form-item prop="score" label="兑换积分">
							<el-input-number :min="1" v-model="rowData.score" placeholder=""></el-input-number>
						</el-form-item>
						<el-form-item prop="type" label="兑换类型">
							<el-select v-model="rowData.type" placeholder="请选择">
								<el-option v-for="item in SEDialog.types" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							</el-option>
						</el-form-item>
						<el-form-item prop="remarks" label="备注">
							<el-input v-model="rowData.remarks" placeholder=""></el-input>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div style="clear:both;"></div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="SEDialog.isShow=false">取消</el-button>
				<el-button type="primary" @click="save()">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				//table数据
				list: [],
				//当前行数据
				rowData: {},
				//行数据验证规则
				rowDataRule: {
					name: [{
						required: true,
						message: '请输名称',
						trigger: 'blur'
					}, ],
					exchangeCondition: [{
						type: 'number',
						message: '请输入兑换条件',
						trigger: 'blur'
					}, ],
					score: [{
						type: 'number',
						message: '请输入兑换积分',
						trigger: 'blur'
					}, ],
					type: [{
						required: true,
						message: '请选择类型',
						trigger: 'change'
					}, ],
				},
				SEDialog: {
					isShow: false, //是否显示保存或编辑弹出框
					title: "",
					curOp: 0,
					types: [{
						id: "1",
						name: "消费"
					}, {
						id: "2",
						name: "评论"
					}, {
						id: "3",
						name: "分享"
					}],
				},
				//所有URL
				urls: {
					insert: "/ScoreRule/insert",
					update: "/ScoreRule/edit",
					getList: "/ScoreRule/list",
					del: "/ScoreRule/del",
					enabled: "/ScoreRule/enabled"
				},
				//提示
				tipMsg: {
					delBefore: "确认删除?"
				}
			};
		},
		mounted() {
			this.getPageData();
		},
		methods: {
			//改变分页后刷新
			getPageData() {
				this.getScoreRule();
			},
			//获取积分规则
			getScoreRule() {
				var that = this;
				this.myajax(this.urls.getList, this.$page, function(res) {
					var data = res.data;
					that.list = data.list;
					that.$page.total = data.total;
				})
			},
			//保存数据
			save() {
				var that = this;
				that.$refs['rowData'].validate(function(b) {
					if(!b)
						return;
					var url = that.SEDialog.curOp == 1 ? that.urls.insert : that.urls.update
					that.myajax(url, that.rowData, function(res) {
						console.log(res);
						that.$notify({
							title: '提示',
							message: res.message,
							type: 'success'
						});
						that.SEDialog.isShow = false;
						that.getPageData();
					})
				});
			},

			//启用,禁用
			enabled(row,index) {
				var that = this;
				this.myajax(this.urls.enabled, row, function(res) {
					console.log(res);
					that.$notify({
						title: '提示',
						message: res.message,
						type: 'success'
					});
					that.getPageData();
				})
			},

			//添加数据显示
			addShowDialog() {
				this.rowData = {
						type: "",
						exchangeCondition: 0,
						score: 0,
					},
					this.SEDialog.title = "添加规则";
				this.SEDialog.isShow = true;
				this.SEDialog.curOp = 1;
			},

			//编辑显示
			editShowDialog(row, index) {
				this.rowData = row;
				row.type = row.type.toString();
				this.SEDialog.title = "编辑规则";
				this.SEDialog.isShow = true;
				this.SEDialog.curOp = 2;
			},

			//删除数据
			del(row, index) {
				var that = this;
				this.$confirm(this.tipMsg.delBofore, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.myajax(this.urls.del, {
						id: row.id
					}, function(res) {
						console.log(res);
						that.$notify({
							title: '提示',
							message: res.message,
							type: 'success'
						});
						that.getPageData();
					})
				});
			},
			handleCurrentChange(val) { //翻页
				this.$handleCurrentChange(val);
				this.getPageData();
			},
			handleSizeChange(val) { //每页数量
				this.$handleSizeChange(val);
				this.getPageData();
			},
			handleSelectionChange(val) {

			}
		}
	};
</script>
<style scoped>
	.input_edit {
		width: 200px;
		float: left;
		margin-right: 10px;
	}
	
	.cell {
		padding: 0 5px !important;
		overflow: auto;
	}
</style>